<template>
  <div
    :class="`
      bg-gradient-to-r ${cardColors.gradient} 
      border-[2px] ${cardColors.border} 
      rounded-lg p-3 
      relative 
      transition-all duration-300 
      hover:shadow-md ${cardColors.hover}
      hover:bg-gradient-to-r ${cardColors.hoverGradient}
      cursor-pointer 
      artifactCardAnimation
      ${cardColors.shadow}
      my-2
    `"
    @click="onClickHandler"
    style="transform-origin: center"
  >
    <!-- 头部 -->
    <div class="flex items-center mb-2.5">
      <div
        class="w-8 h-8 rounded-md flex items-center justify-center mr-2.5 shadow-sm relative overflow-hidden"
        :style="{
          background: cardColors.iconBg,
          color: 'white',
        }"
      >
        <div v-html="icon"></div>
        <div
          class="absolute top-0 right-0 bottom-0 left-0 bg-white opacity-20"
          style="mix-blend-mode: overlay"
        ></div>
      </div>
      <div>
        <div class="text-sm font-semibold" :class="cardColors.textColor">
          {{ isAuditReport ? "文档审核报告" : "原始合同" }}
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div
      class="rounded-md overflow-hidden relative"
      :style="{
        background: 'rgba(255, 255, 255, 0.8)',
        boxShadow: `inset 0 1px 3px rgba(${isAuditReport ? '59,130,246' : '34,197,94'},0.1)`,
        padding: '10px',
        border: `1px solid rgba(${isAuditReport ? '96,165,250' : '74,222,128'},0.2)`,
      }"
    >
      <div class="flex flex-col">
        <div class="text-sm font-medium text-gray-700 mb-1">
          {{ artifact.title }}
        </div>
        <div class="flex items-center rounded px-2 py-0.5 w-fit" :class="cardColors.itemBg">
          <div class="w-2 h-2 rounded-full bg-blue-400 mr-1.5" :class="cardColors.itemDot"></div>
          <div class="text-xs text-blue-500" :class="cardColors.itemText">
            合同编号: {{ artifact.contractId }}
          </div>
        </div>
      </div>
      <div :class="`mt-2 text-xs ${cardColors.footerText}`">点击查看详细内容</div>
      <div class="absolute top-0 right-0 w-16 h-16">
        <div
          class="absolute transform rotate-45 text-white text-[10px] font-medium py-1 right-[-30px] top-[10px] w-[100px] text-center"
          :class="cardColors.ribbonBg"
          :style="{
            backgroundColor: cardColors.ribbonBg,
            opacity: 0.85,
          }"
        >
          {{ isAuditReport ? "审核报告" : "原始合同" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const icon = `<svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
    <polyline points="14 2 14 8 20 8"></polyline>
    <line x1="16" y1="13" x2="8" y2="13"></line>
    <line x1="16" y1="17" x2="8" y2="17"></line>
    <polyline points="10 9 9 9 8 9"></polyline>
  </svg>`;

const props = defineProps({
  artifact: {
    type: Object,
    required: true,
  },
});

// 根据标题判断是审核报告还是原合同
const isAuditReport = computed(() => props.artifact.title?.includes("审核结果"));

const cardColors = isAuditReport.value
  ? {
      gradient: "from-[#f0f9ff] to-[#eff6ff]",
      border: "border-[#60a5fa]",
      hover: "hover:border-[#3b82f6]",
      hoverGradient: "hover:from-[#e0f2fe] hover:to-[#dbeafe]",
      shadow: "shadow-[0_4px_12px_rgba(59,130,246,0.12),0_2px_4px_rgba(59,130,246,0.08)]",
      iconBg: "linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)",
      textColor: "text-blue-700",
      badgeBg: "#60a5fa",
      itemBg: "bg-blue-50",
      itemDot: "bg-blue-400",
      itemText: "text-blue-500",
      footerText: "text-blue-400",
      ribbonBg: "bg-blue-500",
    }
  : {
      gradient: "from-[#f0f9fa] to-[#e0f2f1]",
      border: "border-[#64a5a2]",
      hover: "hover:border-[#0d9488]",
      hoverGradient: "hover:from-[#e0f2f1] hover:to-[#cce5e4]",
      shadow: "shadow-[0_4px_12px_rgba(13,148,136,0.08),0_2px_4px_rgba(13,148,136,0.05)]",
      iconBg: "linear-gradient(135deg, #64a5a2 0%, #0d9488 100%)",
      textColor: "text-teal-800",
      badgeBg: "#64a5a2",
      itemBg: "bg-teal-50",
      itemDot: "bg-teal-400",
      itemText: "text-teal-700",
      footerText: "text-teal-600",
      ribbonBg: "bg-teal-600",
    };

const onClickHandler = () => {};
</script>
